.checkbox {
  input[type="checkbox"] {
    display: grid;
    place-content: center;
    appearance: none;
    border: solid 1px var(--border-color-softer);
    border-radius: var(--border-radius);
    background-color: var(--checkbox-bg);

    &::after {
      content: "";
      visibility: hidden;
      width: 14px;
      height: 14px;
      box-shadow: inset 1em 1em var(--form-control-color);
      background-color: white;
    }

    &:focus {
      box-shadow: 0 0 0 3px var(--border-color);
    }
  }
}

.checkbox input[type="checkbox"]:checked {
  border-color: var(--button-border);
  background-color: var(--main-color);

  &::after {
    visibility: visible;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 79% 0%, 43% 62%);
    transform: scale(0.7) rotate(10deg);
  }
}
